

<title>选课-培养方案</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>选课</cite></a>
        <a><cite>培养方案</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">培养方案</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-page" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="lineBar">
    <a class="layui-btn layui-btn-xs" lay-event="search">搜索</a>
</script>

<script type="text/html" id="toolbarlist">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <select lay-filter="yearFilter" id="yearFilter" name="yearFilter">
                <option value="">请选择年级</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select lay-filter="specialtyFilter" id="specialtyFilter" name="specialtyFilter">
                <option value="">请选择专业</option>
            </select>
        </div>
    </div>
</script>

<script>
    layui.use(['jquery', 'table'], function(){
        var $ = layui.$, form = layui.form, table = layui.table;

        var year_list = [];         // 记录年份列表
        var specialty_list = [];    // 记录专业列表
        var tablelns = table.render({
            elem: '#test-table-page'
            ,url: "/uclass/elective/planinfo"
            ,toolbar: '#toolbarlist'
            ,cols: [[
                {field:'semester', title:'学期', align:'left'}
                ,{field:'className', title: '课程', align: 'left'}
                ,{field:'classType', title:'类型', align:'left'}
                ,{field:'credit', title:'学分', align:'left'}
                ,{align:'center', title:'操作', toolbar:'#lineBar'}
            ]]
            ,parseData: function(res) {
                return {
                    "status": res.status,
                    "message": res.message,
                    "data": res.data
                };
            }
            ,response: {
                statusName: 'status'
                ,statusCode: 200
                ,msgName: 'message'
                ,dataName: 'data'
            }
        });

        // 渲染年份
        var today = new Date();
        var year = today.getFullYear();
        var startYear = year - 4;
        for (var i = year; i >= startYear; i--) {
            $('#yearFilter').append("<option value='" + i + "'>" + i + "</option>");
            year_list.push(i);
        }
        form.render("select");

        // 监听年份，点击后获取当年的专业列表
        form.on("select(yearFilter)", function (obj) {
            $('#specialtyFilter').empty();
            form.render();
            if (obj.value === "") return;
            var sel_year = obj.value;
            $.ajax({
                url: "/uclass/elective/specialty?year=" + sel_year,
                dataType: 'json',
                complete: function (result) {
                    result = result.responseJSON;
                    if (result.status !== 200) {
                        layer.msg(result.message);
                    }
                    var list = result.data;
                    specialty_list = [];
                    for(var specialty in list) {
                        specialty = list[specialty];
                        specialty_list.push(specialty);
                        var html = "<option value='" + specialty.department_code
                            + " " + specialty.code + "'>" + specialty.name + "</option>"
                        $('#specialtyFilter').append(html);
                    }
                    form.render("select");
                }
            })
        });

        // 监听专业
        form.on('select(specialtyFilter)', function (obj) {
            var year = $('#yearFilter').val();
            var code = $('#specialtyFilter').val();
            if (year === "" || code === "") {
                layer.msg("请选择年级与专业");
                return;
            }
            var codeList = code.split(" ");
            var department = codeList[0];
            var specialty = codeList[1];
            tablelns.reload({
                where: {year:year, department_code:department, specialty_code:specialty}
                ,done: function(res, curr, count){
                    year_list.forEach(function (value) {
                        $('#yearFilter').append("<option value='" + value +"'>" + value + "</option>")
                    });
                    specialty_list.forEach(function (value) {
                        var html = "<option value='" + value.department_code
                            + " " + value.code + "'>" + value.name + "</option>"
                        $('#specialtyFilter').append(html);
                    });
                    $('#yearFilter').val(year);
                    $('#specialtyFilter').val(code);
                    form.render("select");
                }
            });
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var classType = data.classType;
            if (classType.substr(0,4) == "公共基础"){
                var keyword = data.className;
                if (keyword.substr(0,2) === "体育") {
                    keyword = "体育";
                }
                window.location.href = "/uclass/admin/index#/menu/elective/publicClassList#?keyword=" + keyword;
            }else {
                layer.msg("非公共课，请到专业课处选择");
            }
        });
    });
</script>